<template>
	<view class="pages">
		<view class="form">
			<view class="form_item">
				<view>{{$t('recharge.pay.Web')}}</view>
				<view style="position: relative;left: 16rpx;">
					<input type="text" :placeholder="$t('recharge.pay.Choose')" v-model="form.name">
					<view class="address" v-show="addressShow">
						<view v-for="item in addresslList" :key="item.id" @click="addressClick(item)">{{item.name}}</view>
					</view>
				</view>
				<uni-icons :type="addressShow?'top':'bottom'" @click="addressShow=!addressShow"></uni-icons>

			</view>
			<view class="form_item">
				<view>{{$t('recharge.pay.cNum')}}</view>
				<input type="number" :placeholder="$t('recharge.pay.Choise')" v-model="form.price">
			</view>
		</view>
		<view class="mask" v-show="isMask">
			<uni-icons type="closeempty" size="30" class="icon" color="#fff" @click="Guan"></uni-icons>
			<view class="mask-text">{{$t('recharge.pay.Close')}}</view>
			<iframe :src="src" frameborder="0" class="iframe"></iframe>
		</view>
		<view class="btn" @click="userCheckRecharge">{{$t('recharge.pay.Sure')}}</view>
	</view>
</template>

<script>
	import { getRechargeChannel, userCheckRecharge, userRecharge } from '@/api/api.js'
	export default {
		data() {
			return {
				form: {},
				addressShow: false,
				addresslList: [],
				src: '',
				isMask: false
			};
		},
		onShow() {
			getRechargeChannel({
				type: 1
			}).then(res=>{
				this.addresslList = res.data.data
				this.form.name = this.addresslList[0].name
				this.form.value = this.addresslList[0].value
			}),
			uni.setNavigationBarTitle({
				title: this.$t('list.Pay')
			})
		},
		methods: {
			addressClick(item){
				this.form.name = item.name
				this.form.value = item.value
				this.addressShow = false
			},
			userCheckRecharge(){
				userCheckRecharge({
					token: uni.getStorageSync('token'),
					money: this.form.price,
				}).then(res=>{
					this.userRecharge()
				})
			},
			userRecharge(){
				userRecharge({
					token: uni.getStorageSync('token'),
					money: this.form.price,
					type: this.form.value
				}).then(res=>{
					this.src = res.data.data.url
					uni.showToast({
						title: res.data.msg,
						icon: "none"
					})
					setTimeout(() => {
						this.isMask = true
					}, 1000)
				})
			},
			Guan() {
				this.isMask = false
				this.form.price = ''
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.uni-input-placeholder{
		color: #ddd;
		font-size: 28rpx;
	}
	.form {
		width: 96%;
		margin: 0 auto;
		font-size: 28rpx;

		.form_item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 60px;
			border-bottom: #ddd 1px solid;
			padding: 0 10px;
			position: relative;

			&>input {
				flex-grow: 1;
				margin-left: 20px;
				height: 50px;
				color: grey;
			}

			.address {
				position: absolute;
				top: 30px;
				left: -10px;
				right: -50px;
				background-color: #ddd;
				z-index: 10;

				&>view {
					height: 40px;
					line-height: 40px;
					padding-left: 5px;
					border-bottom: #fff 1px solid;
				}
			}
		}
	}
	.mask {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: rgba(0, 0, 0, .6);
		z-index: 999;
	
		.icon {
			position: absolute;
			top: 8vh;
			right: 5%;
		}
	
		.mask-text {
			color: red;
			font-weight: 999;
			text-align: center;
			margin-top: 10vh;
		}
	
		.iframe {
			position: fixed;
			top: 15vh;
			left: 5%;
			height: 80vh;
			width: 90%;
		}
	}
	.btn{
		position: absolute;
		bottom: 150px;
		left: 10%;
		right: 10%;
		background-color: #00C2C2;
		color: #fff;
		height: 50px;
		line-height: 50px;
		text-align: center;
		border-radius: 5px;
	}
</style>